<!DOCTYPE html>
<html>
<!-- Fetch the weather informaton -->

<head>
  <title>Ch11-10 Weather Error Handling</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>&#9730;&#65039; Weather</h1>
  <p id="resultParagraph" class="result">
  </p>
  <p>
    <input type="button" value="FETCH" onclick="doGetWeather('https://www.begintocodewithjavascript.com/weather.html')" class="startButton"></button>
  </p>

  <p>
    <input type="button" value="FETCH ERROR" onclick="doGetWeather('https://192.168.99.99')" class="startButton"></button>
  </p>

  <p>
    <input type="button" value="JSON ERROR" onclick="doGetWeather('https://www.begintocodewithjavascript.com/hello.html')" class="startButton"></button>
  </p>


<script>

    function doGetWeather(url) {

      fetch(url).then(response => {
        if (!response.ok) {
          alert("Fetch failed");
          return;
        }
        response.json().then(weather => {
          let resultParagraph = document.getElementById('resultParagraph');
          resultParagraph.innerText = "Temp: " + weather.main.temp;
        }).catch(error => alert("Bad JSON: " + error)); // json error handler
      }).catch(error => alert("Bad fetch: " + error)); // fetch error handler
    }

  </script>
</body>

</html>